<template>
  <el-card class="account-list">
    <div slot="header">
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-input
          size="small"
          clearable
          class="filter-item"
          style="width: 200px; margin-right: 10px"
          placeholder="服务项目名称"
        />
        <el-button
          size="small"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
          >查找</el-button
        >
        <el-button
          size="small"
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          @click="handleCreate"
          >添加</el-button
        >
      </div>
    </div>
    <el-table ref="tableRef" :data="tableData" :style="{ width: w + 'px' }">
      <el-table-column align="center" label="序号" prop="id" />

      <el-table-column
        align="center"
        label="服务名称"
        prop="username"
        sortable
      />

      <el-table-column align="center" label="服务图片" prop="avatar">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" width="40" />
        </template>
      </el-table-column>

      <el-table-column align="center" label="服务介绍" prop="introduce" />
      <el-table-column align="center" label="价格" prop="price" />

      <!-- 操作 -->
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            style="margin-right: 10px"
            size="mini"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-popover placement="top" width="160" v-model="scope.row.isPop">
            <p>这是一段内容这是一段内容确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button
                size="mini"
                type="text"
                @click="scope.row.isPop = false"
                >取消
              </el-button>
              <el-button
                type="primary"
                size="mini"
                @click="
                  scope.row.isPop = false;
                  handleDel(scope.row.id);
                "
                >确定
              </el-button>
            </div>
            <el-button size="mini" type="danger" slot="reference"
              >删除</el-button
            >
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      class="mt20"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 添加和编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="服务项目" prop="username">
          <el-input v-model="dataForm.username" />
        </el-form-item>
        <el-form-item label="服务图片" prop="avatar">
          <el-upload
            :show-file-list="false"
            :on-success="uploadAvatar"
            class="avatar-uploader"
            accept=".jpg,.jpeg,.png,.gif"
          >
            <img v-if="dataForm.avatar" :src="dataForm.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="服务介绍" prop="introduce">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="dataForm.introduce"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="服务价格" prop="price">
          <el-input v-model="dataForm.price" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          v-if="dialogTitle == '创建账号'"
          type="primary"
          @click="createData"
          >确定</el-button
        >
        <el-button v-else type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { number } from "echarts";
//引入处理函数
export default {
  //数据
  data() {
    return {
      //表格数据
      tableData: [
        {
          id: 1,
          username: "清洁保洁",
          avatar:
            "https://juhuixing-public.oss-cn-shenzhen.aliyuncs.com/luq950dq4wzhsn54eq1y.jpeg",
          introduce: "家电清洗",
          price: 200,
        },
        {
          id: 2,
          username: "家电清洗",
          avatar:
            "https://juhuixing-public.oss-cn-shenzhen.aliyuncs.com/luq950dq4wzhsn54eq1y.jpeg",
          introduce: "油烟机清洗",
          price: 560,
        },
        {
          id: 3,
          username: "洗衣洗鞋",
          avatar:
            "https://juhuixing-public.oss-cn-shenzhen.aliyuncs.com/luq950dq4wzhsn54eq1y.jpeg",
          introduce: "洗衣服",
          price: 120,
        },
      ],
      currentPage: 1, //当前页
      total: 5, //总页数
      pageSize: 3, //每页条数
      // 编辑弹窗
      editForm: {
        account: "",
        userGroup: "",
      },
      dataForm: {
        id: undefined,
        username: undefined,
        avatar: undefined,
        introduce: undefined,
        price: undefined,
      },
      dialogFormVisible: false, //编辑弹窗开关
      w: 600, //table宽度
      dialogTitle: "",
      rules: {
        username: [
          { required: true, message: "项目名称不能为空", trigger: "blur" },
        ],
        avatar: [{ required: true, message: "图片不能为空", trigger: "blur" }],
        introduce: [
          { required: true, message: "介绍不能为空", trigger: "blur" },
        ],
        price: [{ required: true, message: "价格不能为空", trigger: "blur" }],
      },
    };
  },
  //生命周期created 用来发送ajax
  created() {
    //初始化发送请求
    this.getData();
  },
  methods: {
    //获取列表数据方法
    async getData() {
      let data = this.tableData;
      data.forEach((v) => {
        v.isPop = false;
      });

      //如果当前页不为1 & 取出来data是一个空数组 当前页-1 重新拉取数据
      if (this.currentPage !== 1 && data.length === 0) {
        this.currentPage--;
        this.getData();
      }

      //数据赋值
      this.tableData = data;
    },
    // 查找
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    // 添加
    handleCreate() {
      // this.resetForm()
      this.dialogTitle = "创建账号";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    uploadAvatar: function (response) {
      this.dataForm.avatar = response.data.url;
    },
    createData() {
      this.dialogFormVisible = false;
    },
    updateData() {
      this.dialogFormVisible = false;
    },
    //编辑
    handleEdit(row) {
      //打开弹窗
      console.log("row :>> ", row);
      this.dialogTitle = "编辑账号";
      this.dialogFormVisible = true;
      //数据回填 数据解绑
      this.editForm = { ...row };
    },
    //确定编辑
    async submitEdit() {
      //发送请求
      console.log("确定编辑 :>> ");
    },
    //删除
    async handleDel(id) {
      console.log("删除 :>> ", id);
    },
    //改变页数
    handleSizeChange(val) {
      //把val赋值给每页条数
      this.pageSize = val;
      //拉取数据
      this.getData();
    },
    //改变当前页
    handleCurrentChange(val) {
      //把val赋值给当前页码
      this.currentPage = val;
      //拉取数据
      this.getData();
    },
    //计算table宽度
    calcTableWidth() {
      this.w = document.body.clientWidth - 290;
    },
  },
  //操作dom mounted生命周期
  mounted() {
    //初始化计算一次
    this.calcTableWidth();
    //屏幕拉伸计算
    window.addEventListener("resize", this.calcTableWidth);
  },
  //清除挂载在全局的属性和方法
  beforeDestroy() {
    //切换组件 销毁
    window.removeEventListener("resize", this.calcTableWidth);
  },
};
</script>

<style lang="less" scoped>
.account-list {
  background-color: #fff;
}

.el-form {
  ::v-deep .el-input__inner {
    width: 183px;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
</style>
